<template>
  <el-container>
    <!-- 左侧边栏 -->
    <navbar :Collapse="isCollapse"></navbar>
    <el-container>
      <!-- 头部导航栏 -->
      <headernav></headernav>
      <el-main :class="{'main-body':true,'main-body-lg':isCollapse}">
        <div class="main-body-white">
          <!-- 主体内容 -->
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
          </keep-alive>
          <router-view v-if="!$route.meta.keepAlive"></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  require('sockjs-client/dist/sockjs.js');
  var Stomp = require('stompjs');
  import navbar from './NavBar';
  import headernav from './Header';
  export default {
    data(){
      return {
        baseUrl:'wss://47.104.244.164:15671/ws',//服务器
        backSocketUrl:'https://47.104.244.164:15671/stomp',
        // baseUrl:'wss://192.168.31.210:15671/ws',//本地
        // backSocketUrl:'https://192.168.31.210:15671/stomp',
        isCollapse: false,
        client:JSON.parse(sessionStorage.getItem('user')),
        clientSocket:{}
      };
    },
    computed:{
    },
    components: {
      navbar,
      headernav
    },
    mounted(){
      this.$root.Bus.$on('isCollapse',value=>{
        this.isCollapse =  value;
      });
      // this.initConnect();
    },
    methods:{
      initConnect(){
        if (typeof WebSocket == 'undefined') {
            console.log('不支持websocket')
            var ws = new SockJS(this.backSocketUrl);
        }else{
            // 初始化 ws 对象
            var ws = new WebSocket(this.baseUrl);
        }
        // 获得Stomp client对象
        this.clientSocket = Stomp.over(ws);

        // SockJS 不支持 heart-beat
        this.clientSocket.heartbeat.outgoing = 60000;
        this.clientSocket.heartbeat.incoming = 60000;
        this.clientSocket.connect('ymty', 'ymty', this.connect, this.error, '/ymty');
      },
      connect(){
        // console.log('success',new Date());
        //data.body是接收到的数据
        this.clientSocket.subscribe("/queue/CLIENT_"+this.client.id, (data)=> {
            var quote = JSON.parse(data.body);
            // console.log(data)
            if(quote.action==4){
              if(this.$route.path == '/Group/GroupManagement'){
                //提示刷新组别
                this.$root.Bus.$emit('refreshGroup',true);
              }
            }else{
              var message = (quote.user?(quote.user+'：'):'')+quote.box+['开门','绑定','预留','释放'][quote.action]+['失败','成功'][quote.result];
              this.$root.Bus.$emit('boxMessage',message);
              if(this.$route.path == '/CentralizedController/BoxManagement'){
                //提示刷新box
                this.$root.Bus.$emit('refreshBoxs',true);
              }
              this.$notify({title: ['失败','成功'][quote.result],message: message,type: ['warning','success'][quote.result]});
            }
        });
      },
      error(error){
        // console.log('error',error,new Date());
        this.initConnect();
      }
    }
  }
</script>
<style scoped>
  .main-body{
    background:#f7f6f6;
    position: absolute;
    top: 60px;
    left: 199px;
    transition:left .3s;
    transition-timing-function:ease-in-out;
    right: 0;
    bottom: 0
  }
  .main-body-lg{
    left:63px;
  }
  .main-body-white{
    background: #fff;
    padding: 0 15px 25px 15px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    border: 1px solid #ebeef5;
    border-radius: 2px;
  }
</style>

